<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <p>name: {{name}}</p>
            <p>_data name:{{_data.name}}</p>
        </div>
        <script>
            /**
             *  数据代理：将配置项中的data中的数据，都变成vm的属性。[Object.defineProperty]
             *  作用：方便在模板中直接读取
             *  
             *  data === vm._data
             */
            const vm = new Vue({
                el:'#demo',
                data:{
                    name:'atguigu',
                    age:19,
                    sex:'男'
                }
            })

            console.log('vm: ', vm)


            function MyVue(config){
                this._data = config.data
                console.log(Object.keys(config.data))
                // Object.keys(config.data)
                Object.keys(config.data).forEach(attr=>{
                    Object.defineProperty(this, attr, {
                        get(){
                            return config.data[attr]
                        },
                        set(val){
                            config.data[attr] = val
                        }
                    })
                })
            }

            const vm2 = new MyVue({
                data:{
                    aaa:1111,
                    bbb:222,
                    ccc:333
                }
            })
            console.log(vm2)
            vm2.aaa = 999
            console.log(vm2)
           
        </script>
    </body>
</html>